<!-- 账号注册页 -->
<template>
	<view class="uni-content pt10 pb20 register">
		<!-- 顶部文字 -->
		<text class="uni-content-title-line mb20">欢迎注册</text>
		<uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="submit">
			<uni-forms-item name="username">
				<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
					placeholder="请输入登录账号" v-model="formData.username" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="nickName">
				<uni-easyinput :focus="focusNickName" @blur="focusNickName = false" class="input-box"
					placeholder="请输入昵称" v-model="formData.nickName" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="phonenumber">
				<uni-easyinput :focus="focusPhonenumber" @blur="focusPhonenumber = false" class="input-box"
					placeholder="请输入手机号码" v-model="formData.phonenumber" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="email">
				<uni-easyinput :focus="focusEmail" @blur="focusEmail = false" class="input-box"
					placeholder="请输入邮箱" v-model="formData.email" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="password" v-model="formData.password">
				<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" maxlength="16"
					:placeholder="'请输入8-16位密码'" type="password" v-model="formData.password" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="password2" v-model="formData.password2">
				<uni-easyinput :focus="focusPassword2" @blur="focusPassword2 =false" class="input-box"
					placeholder="再次输入密码" maxlength="16" type="password" v-model="formData.password2" trim="both" />
			</uni-forms-item>
			<!-- 带选择框的隐私政策协议组件 -->
			<view>
				<agreements scope="login" ref="agreements"></agreements>
			</view>
			<button style="margin-top: 10px;" class="blue-btn" type="default" @click="submit">注册</button>
		</uni-forms>
		<!-- 忘记密码 -->
		<view class="link-box">
			<text class="link-box-left"></text>
			<text class="link-box-right" @click="navigateToFun('/pages/ucenter/bind/index')">已有账号,去绑定</text>
		</view>
	</view>
</template>

<script>
	import rules from '../common/js/validator.js';
	import config from '../common/js/config.js'
	import agreements from '../agreement/index.vue';
	import mixin from '../common/js/login-page.mixin.js';
	export default {
		components: {
			agreements
		},
		mixins: [mixin],
		data() {
			return {
				formData: {
					username: "",
					nickName: "",
					password: "",
					password2: "",
					phonenumber: "",
					email: "",
					captcha: ""
				},
				rules,
				focusUsername: false,
				focusNickName: false,
				focusPassword: false,
				focusPassword2: false,
				focusPhonenumber: false,
				focusEmail: false,
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submit() {
				this.$refs.form.validate().then((res) => {
					if (this.needAgreements && !this.agree) {
						return this.$refs.agreements.popup(this.submit)
					}
					const openid = uni.getStorageSync('userOpenId');
					if (openid) {
						let data = {
							name: res.username,
							nickName: res.nickName,
							phonenumber: res.phonenumber,
							email: res.email,
							passwordForRegister: res.password,
							openId: openid
						}
						this.$post(this.$api.wx.ucenter.regist, data).then(res => {
							uni.showToast({
								title: "注册成功",
								icon: 'success'
							});
							uni.setStorage({
								key: "gkms-userInfo",
								data: res.userInfo
							})
							uni.setStorage({
								key: "token",
								data: res.token
							})
							setTimeout(() => {
								this.$loginSuccessGoFun()
							}, 1500)
						}).catch(e => {
							console.log('注册失败')
							if (e.data.msg == "微信账号已绑定") {
								uni.showToast({
									title: "注册失败，微信账号已绑定",
									icon: 'none',
									duration: 3000
								});
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/ucenter/login/wxLogin"
									})
								}, 3000)
							} else if (e.data.msg == "注册用户失败，用户名已存在") {
								this.focusUsername = true
								uni.showToast({
									title: "注册用户失败，用户名已存在",
									icon: 'none'
								});
							} else if (e.data.msg == "注册用户失败，手机号已存在") {
								this.focusPhonenumber = true
								uni.showToast({
									title: "注册用户失败，手机号已存在",
									icon: 'none'
								});
							} else if (e.data.msg == "注册用户失败，邮箱已存在") {
								this.focusEmail = true
								uni.showToast({
									title: "注册用户失败，邮箱已存在",
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: e.data.msg,
									icon: 'none'
								});
							}
						})
					} else {
						uni.showToast({
							title: "获取微信openid失败",
							icon: 'none'
						});
					}
				}).catch((errors) => {
					let key = errors[0].key
					key = key.replace(key[0], key[0].toUpperCase())
					console.log(key);
					this['focus' + key] = true
				})
			},
			navigateToFun(url) {
				uni.navigateTo({
					url: url,
					fail(e) {
						console.error(e);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/style/uc-common.scss";
</style>